<template>
  <div class="main">
    <el-row :gutter="20">
<!--      <el-col :span="4">-->
<!--        <p class="label-form"> 汽车名称：</p>-->
<!--        <el-input v-model="queryParams.model" placeholder="请输入汽车名称"></el-input>-->
<!--      </el-col>-->
      <el-col :span="4">
        <p class="label-form"> 车牌号：</p>
        <el-input v-model="queryParams.licensePlate" placeholder="请输入车牌号"></el-input>
      </el-col>
<!--      <el-col :span="4">-->
<!--        <p class="label-form"> 轮胎品牌：</p>-->
<!--        <el-select style="width: 100%;" clearable v-model="queryParams.brandId" placeholder="请选择">-->
<!--          <el-option-->
<!--            v-for="item in optionsBrand"-->
<!--            :key="item.id"-->
<!--            :label="item.name"-->
<!--            :value="item.id">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-col>-->
      <el-col :span="6">
        <p class="label-form"></p>
        <el-button type="primary" @click="getSelect" icon="el-icon-search">搜索</el-button>
        <el-button type="warning" @click="resert" icon="el-icon-refresh-right">重置</el-button>
      </el-col>
    </el-row>

<!--    <el-row :gutter="20" style="margin-top: 10px">-->
<!--      <el-col :span="4">-->
<!--        <el-button @click="addShop" type="primary" icon="el-icon-plus">新增</el-button>-->
<!--      </el-col>-->
<!--    </el-row>-->

    <el-table
      row-key="id"
      :expand-row-keys="expandedRowKeys" @expand-change="handleExpand"
      :data="carList"
      max-height="600"
      border
      style="margin-top: 30px">
<!--      <el-table-column type="expand">-->
<!--        <template slot-scope="props">-->
<!--          <div style="padding: 20px;box-sizing: border-box">-->
<!--            <el-table :data="tyreList" border style="" v-loading="loading">-->
<!--              <el-table-column prop="position" label="轮胎位置">-->
<!--                <template slot-scope="scope">-->
<!--                  {{position(scope.row.position)}}-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="specification" label="轮胎规格"></el-table-column>-->
<!--              <el-table-column prop="patten" label="轮胎花纹"></el-table-column>-->
<!--              <el-table-column prop="size" label="轮胎尺寸"></el-table-column>-->
<!--              <el-table-column prop="dot" label="轮胎DOT信息"></el-table-column>-->

<!--              <el-table-column prop="code" label="条形码">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-image :src="scope.row.code"></el-image>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="pattenImg" label="花纹图">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-image :src="scope.row.pattenImg"></el-image>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="sizeImg" label="花纹名称图">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-image :src="scope.row.sizeImg"></el-image>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="specificationImg" label="规格图">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-image :src="scope.row.specificationImg"></el-image>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="img" label="DOT图">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-image :src="scope.row.dotImg"></el-image>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="type" align="center" label="操作" min-width="80" fixed="right">-->
<!--                <template slot-scope="scope">-->
<!--                  <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteTyre(scope.row)">解除绑定</el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="id" width="80" label="ID"></el-table-column>
<!--      <el-table-column prop="model" label="汽车名称"></el-table-column>-->
      <el-table-column prop="img" label="车辆图片">
        <template slot-scope="scope">
          <el-image style="height: 50px" lazy :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="id"  width="180" label="营运车辆">
          <template slot-scope="scope">
            {{/1/.test(scope.row.extInfo) ? '是':'否'}}
          </template>
      </el-table-column>
      <el-table-column prop="licensePlate" label="车牌号"></el-table-column>
      <el-table-column prop="brand" label="品牌名称"></el-table-column>
      <el-table-column prop="brand" label="轮胎信息">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="openTyre(scope.row)">查看轮胎</el-button>
        </template>
      </el-table-column>
<!--      <el-table-column prop="storeName" label="已绑定门店"></el-table-column>-->
<!--      <el-table-column prop="storeAddress" label="门店地址"></el-table-column>-->
<!--      <el-table-column prop="storePhone" label="门店联系方式"></el-table-column>-->
      <el-table-column prop="type" align="center" label="操作" min-width="120" fixed="right">
        <template slot-scope="scope">

<!--          <el-button type="primary" size="mini" icon="el-icon-plus" @click="addType(scope.row)">绑定轮胎</el-button>-->
          <el-button type="text" size="mini" icon="el-icon-edit" @click="updateShop(scope.row)">修改</el-button>
          <el-button type="text" size="mini" icon="el-icon-view" @click="viewShop(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="轮胎信息"
      :visible.sync="payStatus"
      width="1200px"
      :before-close="handleClosePayStatus">
      <el-table
        :data="tyreListArray"
        border
        size="mini"
        style="width: 100%">
        <el-table-column prop="code" label="条形码" min-width="150">  </el-table-column>
        <el-table-column prop="patnm" label="花纹" min-width="150"> </el-table-column>
        <el-table-column prop="spcnm" label="规格" min-width="150"></el-table-column>
        <el-table-column prop="dot" label="DOT" min-width="150"></el-table-column>
        <el-table-column prop="brnm" label="轮胎品牌" min-width="150"></el-table-column>
        <el-table-column prop="erpid" label="物料编码" min-width="150"></el-table-column>
        <el-table-column prop="scmnm" label="客户编码" min-width="150"></el-table-column>
        <el-table-column prop="createTime" label="安装时间" min-width="180">
          <template slot-scope="scope">

            {{parseTime(scope.row.installationTime)}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="轮胎位置" min-width="150">
          <template slot-scope="scope">

            {{position(scope.row.position)}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="是否允许理赔" min-width="150">
          <template slot-scope="scope">

            {{scope.row.isReparation ===1 ? '否':'是'}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="120" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="deleteTyreRecord(scope.row)" icon="el-icon-delete" size="mini">删除记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">

        <el-button type="primary" @click="payStatus = false">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="isEdit ? '修改-车辆管理':'车辆管理'"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="汽车名称">
          <el-input v-model="form.model"></el-input>
        </el-form-item>
        <el-form-item label="车辆图片">
          <lz-upload :limit="1" :img-src="form.img" @uploadImage="uploadImage"></lz-upload>
<!--          <image-upload :limit="1" :isShowTip="false" v-model="form.img"></image-upload>-->
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="form.licensePlate"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
          <el-select style="width: 100%;" clearable v-model="form.brandId" placeholder="请选择">
            <el-option
              v-for="item in optionsBrand"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="已绑定门店">
          <el-select
            style="width: 100%;"
            clearable
            @change="changeStore"
            v-model="form.storeId"
            placeholder="请选择">
            <el-option
              v-for="item in optionsStore"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="门店地址">
          <el-input v-model="form.storeAddress"></el-input>
        </el-form-item>
        <el-form-item label="门店电话">
          <el-input v-model="form.storePhone"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="1" >启用</el-radio>
            <el-radio :label="0" >禁用</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="isEdit || isAdd" @click="closeForm">取消</el-button>
        <el-button v-if="isEdit && !isAdd" type="primary" @click="updateForm">立即更新</el-button>
<!--        <el-button v-if="isEdit && isAdd" type="primary" @click="insertForm">立即提交</el-button>-->
        <el-button v-if="!isEdit" type="primary" @click="closeForm">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="绑定轮胎"
      :visible.sync="dialogVisibleTyre"
      width="900px"
      :before-close="handleCloseTyre">
      <el-form ref="form" :model="formData" label-width="100px">
        <el-form-item label="位置">
          <el-select style="width: 100%;" clearable v-model="formData.position" placeholder="请选择">
            <el-option
              v-for="item in postions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="轮胎规格">
          <el-input v-model="formData.specification"></el-input>
        </el-form-item>
        <el-form-item label="轮胎花纹">
          <el-input v-model="formData.patten"></el-input>
        </el-form-item>
        <el-form-item label="轮胎尺寸">
          <el-input v-model="formData.size"></el-input>
        </el-form-item>
        <el-form-item label="轮胎DOT信息">
          <el-input v-model="formData.dot"></el-input>
        </el-form-item>

        <el-form-item label="条形码">
          <lz-upload :limit="1" :img-src="formData.code" @uploadImage="uploadImage1"></lz-upload>
<!--          <image-upload :limit="1" :isShowTip="false" v-model="form.code"></image-upload>-->
        </el-form-item>
        <el-form-item label="花纹图">
          <lz-upload :limit="1" :img-src="formData.pattenImg" @uploadImage="uploadImage2"></lz-upload>
<!--          <image-upload :limit="1" :isShowTip="false" v-model="form.pattenImg"></image-upload>-->
        </el-form-item>
        <el-form-item label="花纹名称图">
          <lz-upload :limit="1" :img-src="formData.sizeImg" @uploadImage="uploadImage3"></lz-upload>
<!--          <image-upload :limit="1" :isShowTip="false" v-model="form.sizeImg"></image-upload>-->
        </el-form-item>
        <el-form-item label="规格图">
          <lz-upload :limit="1" :img-src="formData.specificationImg" @uploadImage="uploadImage4"></lz-upload>
<!--          <image-upload :limit="1" :isShowTip="false" v-model="form.specificationImg"></image-upload>-->
        </el-form-item>
        <el-form-item label="DOT图">
          <lz-upload :limit="1" :img-src="formData.dotImg" @uploadImage="uploadImage5"></lz-upload>
<!--          <image-upload :limit="1" :isShowTip="false" v-model="form.dotImg"></image-upload>-->
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelInsert">取消</el-button>
        <el-button type="primary" @click="submitBand">确定</el-button>
      </span>
    </el-dialog>

    <div class="box-pager">
      <pagination
        v-show="pager.total>0"
        :total="pager.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getListsPage"
      />
    </div>
    <div class="safe"></div>
  </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";
import axios from "axios";
import {addType} from "@/api/system/dict/type";
import {
  carListUserId, deleteCardRecord, deleteTyre,
  getCarList,
  getStoreList, getTyreById,
  getTyreList,
  getUserList, insertTyre, tyreInstallLogList2,
  updateTyre,
  userTyreList
} from '@/api/apiFox'

export default {
  data() {
    return {
      currentPage1: 5,
      value1: '',
      pager: {
        total:10
      },
      form: {},
      payStatus:false,
      tyreListArray:[],
      formData:{
        carId: "",
        code: "",
        position: "",
        size: "",
        sizeImg: "",
        patten: "",
        pattenImg: "",
        specification: "",
        specificationImg: "",
        dot: "",
        dotImg: ""
      },
      dialogVisible: false,
      isEdit: false,
      dialogVisibleTyre:false,
      center: {lng: 117.404, lat: 35.915},
      mark: {lng: '', lat: ''},
      optionsStore:[],
      queryParams:{
        pageNum:1,
        pageSize:10,
        model:"",
        licensePlate:"",
        brandId:""
      },
      content:"",
      expandedRowKeys:[],
      carList:[],
      isAdd:false,
      tyreList:[],
      options: [
        {value: "", label: '全部'},
        {value: 0, label: '禁用'},
        {value: 1, label: '启用'},
      ],
      postions:[
        {value: 1, label: '左前'},
        {value: 2, label: '右前'},
        {value: 3, label: '左后'},
        {value: 4, label: '右后'},
      ],
      optionsBrand:[ ],
      optionsCar:[],
      loading: false,
      tyreForm:{},
      openValue:{}
    }
  },
  created() {
    getStoreList().then(res=>{
      this.optionsStore = res
    })
  },
  mounted() {
    this.getBaseInfo()
    this.getLists(this.queryParams)
  },
  methods: {
    parseTime,
    getLists(params) {
      getCarList(params).then(res=>{
        console.log(res)
        if (this.optionsStore && this.optionsStore.length>0){
          this.optionsStore.forEach(value => {
            if (res.rows && res.rows.length>0){
              res.rows.forEach(value1=>{
                if (value1.storeId === value.id){
                  value1.storeName = value.name
                  value1.storeAddress = value.address
                  value1.storePhone = value.phone
                }
              })
            }
          })
        }
        this.pager.total=res.total
        this.carList =res.rows
      })
    },
    deleteTyreRecord(item){
      deleteCardRecord(item.id).then(res=>{
        this.$message.success('删除成功')
        this.getTyreRecordList(this.openValue)
      }).catch(err=>{
        this.getTyreRecordList(this.openValue)
      })
    },
    getTyreRecordList(item){
      getTyreById({carId:item.id}).then(res=>{
        this.tyreListArray = res
      }).catch(err=>{
        this.tyreListArray = []
      })
    },
    handleClosePayStatus(){
      this.payStatus = false
    },
    openTyre(item){
      this.openValue = item
      getTyreById({carId:item.id}).then(res=>{

        this.tyreListArray = res
        this.payStatus = true
      }).catch(err=>{
        this.payStatus = false
        this.tyreListArray = []
      })
    },
    closeForm(){
      this.form = {}
      this.dialogVisible=false
      this.isEdit=false
      this.isAdd=false
      this.getLists(this.queryParams)
    },

    changeStore(e){
      if (e){
        let s = this.optionsStore.filter(value => {return value.id === e})
        console.log(s)
        this.form.storeAddress = s[0].address
        this.form.storePhone = s[0].phone
      }

    },

    updateForm(){
      updateTyre(this.form).then(res=>{
        this.$message.success('更新成功')
        this.closeForm()
      })
    },

    uploadImage(e){this.form.img = e},
    uploadImage1(e){this.formData.code = e},
    uploadImage2(e){this.formData.pattenImg = e},
    uploadImage3(e){this.formData.sizeImg = e},
    uploadImage4(e){this.formData.specificationImg = e},
    uploadImage5(e){this.formData.dotImg = e},

    getListsPage(e){
      this.queryParams.pageNum = e.page
      this.queryParams.pageSize = e.limit
      this.getLists(this.queryParams)
    },
    getSelect(){
      this.getLists(this.queryParams)
    },
    resert(){
      this.queryParams={
        pageNum:1,
        pageSize:10,
        model:"",
        licensePlate:"",
        brandId:""
      }
      this.getLists(this.queryParams)
    },

    handleExpand(row,expandedRows) {
      this.loading=true
      const currentRowId = row.id;
      this.tyreForm = row
      const index = this.expandedRowKeys.indexOf(currentRowId);
      if (index === -1) {

        this.expandedRowKeys = [currentRowId];
      } else {
        this.expandedRowKeys = [];
      }
      this.getTyre(row.id)
    },

    getTyre(item){
      userTyreList({carId:item}).then(res=>{
        console.log(res)
        this.tyreList = res.rows
        this.loading=false
      })
    },
    cancelInsert(){
      this.dialogVisibleTyre = false
      for(let key in this.formData){
        this.formData[key] = ""
      }
      this.getLists(this.queryParams)
    },
    submitBand(){
      console.log(this.formData)
      if (!this.formData.position){
        this.$message.error('请选择位置')
        return
      }
      if (!this.formData.specification){
        this.$message.error('轮胎规格必填')
        return
      }
      if (!this.formData.patten){
        this.$message.error('轮胎花纹必填')
        return
      }
      if (!this.formData.size){
        this.$message.error('轮胎尺寸必填')
        return
      }
      if (!this.formData.dot){
        this.$message.error('轮胎DOT信息必填')
        return
      }
      if (!this.formData.code){
        this.$message.error('条形码必填')
        return
      }
      if (!this.formData.pattenImg){
        this.$message.error('花纹图必填')
        return
      }
      if (!this.formData.sizeImg){
        this.$message.error('花纹名称图必填')
        return
      }
      if (!this.formData.specificationImg){
        this.$message.error('规格图必填')
        return
      }
      if (!this.formData.dotImg){
        this.$message.error('DOT图必填')
        return
      }
      insertTyre(this.formData).then(res=>{
        this.$message.success('新增成功')
        this.cancelInsert()
      })
    },
    getBaseInfo(){
      getTyreList().then(res=>{
        this.optionsBrand = res
      })
    },

    deleteTyre(row){
      // updateTyre({id:row.id,isdelete:1}).then(res=>{
      //   this.$message.success('解绑成功')
      //   // this.handleExpand(this.tyreForm)
      //   this.getTyre(this.tyreForm.id)
      // })
      deleteTyre(row.id).then(res=>{
          this.$message.success('解绑成功')
          // this.handleExpand(this.tyreForm)
          this.getTyre(this.tyreForm.id)
      })
    },

    updateShop(item) {
      this.dialogVisible = true
      this.form = item
      console.log(item)
      this.isEdit = true
      this.isAdd=false
    },
    viewShop(item) {
      this.dialogVisible = true
      this.form = item
      this.isEdit = false
      this.isAdd=false
    },
    addType(e){
      console.log(e)
      this.formData.carId=e.id
      this.dialogVisibleTyre = true

    },
    handleClose() {
      this.dialogVisible = false
    },
    handleCloseTyre(){
      this.dialogVisibleTyre =false
    },
    position(val) {
      switch (val) {
        case 1: {
          return '左前'
        }
        case 2: {
          return '右前'
        }
        case 3: {
          return '左后'
        }
        case 4: {
          return '右后'
        }
      }
    },
    status(val) {
      switch (val) {
        case 0: {
          return '禁用'
        }
        case 1: {
          return '启用'
        }
      }
    },
  },
}
</script>


<style scoped lang="scss">
.map {
  width: 100%;
  height: 300px;
}

.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.grid-content {
  height: 40px;
  text-align: right;
  line-height: 40px;

}

.bg-purple {
  font-size: 14px;
  color: #3f3f3f;
}
</style>
